<template>
	<view>
		<!-- 顶部定位 -->
		<view class="nav">
			<view class="icon">
				<van-icon name="location" size="25px" />
			</view>
			<view class="address" @click="myaddress()">{{address}}</view>
		</view>
		<!-- 内容 -->
		<view class="container">
			<!-- 搜索框 -->
			<van-search :value=" value " shape="round" background="#fbfbfc" placeholder="请输入搜索关键词" />
			<!-- 标签 -->
			<view class="label_list">
				<view class="label">
					烤肉饭
				</view>
				<view class="label">
					粥
				</view>
				<view class="label">
					包子
				</view>
				<view class="label">
					麻辣烫
				</view>
				<view class="label">
					手工面条
				</view>
				<view class="label">
					蜜雪冰城
				</view>
			</view>
			<!-- 菜单 -->
			<scroll-view scroll-x="true" class="box">
				<view class="small_box">
					<view class="contont">
						<view class="cont">
							<view class="">
								<navigator url="../food/food">
									<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_03.png" mode=""></image>
									<view class="">美食</view>
								</navigator>
							</view>
							<view class="">
								<navigator url="../supermarket/supermarket">
									<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_05.png" mode=""></image>
									<view class="">超市便利</view>
								</navigator>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_07.png" mode=""></image>
								<view class="">蔬菜水果</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_09.png" mode=""></image>
								<view class="">买药</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_11.png" mode=""></image>
								<view class="">跑腿代购</view>
							</view>
						</view>
						<view class="cont">
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_18.png" mode=""></image>
								<view class="">早餐</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_19.png" mode=""></image>
								<view class="">包子粥铺</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_20.png" mode=""></image>
								<view class="">超值联盟</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_21.png" mode=""></image>
								<view class="">家常菜</view>
							</view>
							<view class="">
								<image src="../../static/_T%5B10Q0XI~%5B~%5D%7B%25%7D%5DCU9HIV_22.png" mode=""></image>
								<view class="">快食简餐</view>
							</view>
						</view>
					</view>
				</view>
				<view class="small_box">
					<view class="contont">
						<view class="cont">
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_03.png" mode=""></image>
								<view class="">汉堡披萨</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_07.png" mode=""></image>
								<view class="">麻辣烫冒菜</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_19.png" mode=""></image>
								<view class="">日韩料理</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_05.png" mode=""></image>
								<view class="">暖胃粉面</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_11.png" mode=""></image>
								<view class="">浪漫鲜花</view>
							</view>
						</view>
						<view class="cont">
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_18.png" mode=""></image>
								<view class="">甜蜜蛋糕</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_09.png" mode=""></image>
								<view class="">凉皮肉夹馍</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_20.png" mode=""></image>
								<view class="">无辣不欢</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_21.png" mode=""></image>
								<view class="">能量西餐</view>
							</view>
							<view class="">
								<image src="../../static/BOFS65K%5DYM25%5DLB@NVH%259NF_22.png" mode=""></image>
								<view class="">全部分类</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 神价格 -->
			<view class="price">
				<view class="title">
					<view class="title_price">神价格</view>
					<view class="title_prices">这么买更实惠</view>
					<view class="title_pricess">更多 ></view>
				</view>
				<view class="shopping_list">
					<view class="shopping" v-for="(price,index) in price">
						<image :src="price.img" mode=""></image>
						<view class="shoppine_name">{{price.name}}</view>
						<view class="shoppine_price">￥{{price.price}}</view>
					</view>
				</view>
			</view>
			<!-- banner -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 华莱士 -->
			<view class="wallace">
				<image :src="background" mode=""></image>
				<view class="wallace_price">满28减20 进店享更多优惠</view>
				<view class="shopping_list">
					<view class="shopping" v-for="(wallacr,index) in wallacr">
						<image :src="wallacr.img" mode=""></image>
						<view class="shoppine_name">{{wallacr.name}}</view>
						<view class="shoppine_price">￥{{wallacr.price}}</view>
					</view>
				</view>
			</view>
			<!-- 附近商家 -->
			<view class="merchant_text">附近商家</view>
			<view class="merchant_tab">
				<view class="">综合排序</view>
				<view class="">销量高</view>
				<view class="">速度快</view>
				<view class="">新人立减</view>
				<view class="">筛选</view>
			</view>
			<!-- 商家列表 -->
			<view class="merchant" v-for="(item,index) in shopping">
				<image :src="item.img" mode=""></image>
				<view class="shoppine_div">
					<view class="merchant_name">{{item.name}}</view>
					<view class="merchant_view">
						<view class="score">评分{{item.score}}</view>
						<view class="score">月售{{item.value}}</view>
						<view class="score">{{item.time}}分钟</view>
						<view class="score">{{item.distance}}km</view>
					</view>
					<view class="merchant_view">
						<view class="score">起送￥{{item.mum}}</view>
						<view class="score">免配送费</view>
						<view class="score">人均￥{{item.per}}</view>
						<view class="meituan">美团专送</view>
					</view>
					<view class="appraise">{{item.appraise}}</view>
					<view class="merchant_view">
						<view class="labels">{{item.label}}</view>
						<view class="labels">{{item.label_one}}</view>
						<view class="labels">{{item.label_two}}</view>
						<view class="labels">{{item.label_three}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import json from '../../json.js';
	export default {
		data() {
			return {
				address: "点击获取位置",
				price: null,
				banner: null,
				wallacr: null,
				background: null,
				shopping: null
			}
		},
		onLoad() {
			this.price = json.price;
			this.banner = json.banner;
			this.wallacr = json.wallacr;
			this.background = json.background;
			this.shopping = json.shopping;
			console.log(this.price)
			console.log(this.banner)
			console.log(this.wallacr)
			console.log(this.background)
			console.log(this.shopping)
		},
		methods: {
			myaddress() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name;
						console.log(that.address)
					}
				});
			}
		}
	}
</script>

<style scoped>
	.labels {
		color: red;
		border: 1px solid red;
		font-size: 12px;
		border-radius: 15px;
		padding: 2px;
		margin-top: -5px;
	}

	.appraise {
		font-size: 13px;
		background-color: #fff8e1;
		color: #ffc989;
		width: 60%;
		text-align: center;
		margin-top: 8px;
	}

	.shoppine_div {
		width: 70%;
	}

	.meituan {
		width: 50%;
		text-align: center;
		color: #000000;
		background-color: #ffd161;
		font-size: 12px;
		font-weight: 900;
		padding: 1px;
		border-radius: 5px;
	}

	.score {
		font-size: 13px;
		color: #555555;
		width: 40%;
	}

	.merchant_view {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.merchant_name {
		font-weight: 900;
		font-size: 16px;
	}

	.merchant {
		background-color: #FFFFFF;
		width: 95%;
		margin-left: 2.5%;
		height: 130px;
		margin-top: 10px;
		display: flex;
		justify-content: start;
		border-radius: 15px;
	}

	.merchant image {
		width: 100px;
		height: 70px;
	}

	.nav {
		background-color: #ffce4d;
		width: 100%;
		height: 120px;
	}

	.icon {
		padding-top: 50px;
		padding-left: 15px;
	}

	.address {
		margin-top: -28px;
		padding-left: 40px;
	}

	.container {
		background-color: #fbfbfc;
		width: 100%;
		border-radius: 25px 25px 0px 0px;
		margin-top: -35px;
		overflow: hidden;
	}

	.label {
		background-color: #f5f5f6;
		width: 55px;
		font-size: 12px;
		text-align: center;
		border-radius: 15px;
		float: left;
	}

	.label_list {
		padding-left: 15px;
	}

	.small_box {
		background-color: #ffffff;
		height: 185px;
		border-radius: 15px;
		display: inline-block;
		width: 100%;
	}

	.box {
		width: 95%;
		margin-left: 2.5%;
		clear: both;
		padding-top: 20px;
		white-space: nowrap;
	}

	.cont {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 13px;
		padding-top: 17px;
	}

	.cont image {
		width: 47px;
		height: 47px;
	}

	.price {
		width: 95%;
		margin-left: 2.5%;
		margin-top: 15px;
		background-color: #ffffff;
		height: 185px;
		border-radius: 15px;
	}

	.title {
		display: flex;
		justify-content: start;
	}

	.title_price {
		color: red;
		font-size: 20px;
		font-weight: 900;
		margin-left: 15px;
		margin-top: 5px;
	}

	.title_prices {
		font-size: 14px;
		color: #808080;
		margin-top: 8px;
		margin-left: 5px;
		width: 60%;
	}

	.title_pricess {
		font-size: 14px;
		color: #808080;
		margin-top: 9px;
	}

	.shopping image {
		width: 150px;
		height: 100px;
	}

	.shopping_list {
		display: flex;
		justify-content: space-around;
	}

	.shoppine_name {
		font-weight: 900;
	}

	.shoppine_price {
		color: red;
		font-weight: 900;
	}

	.banner {
		width: 95%;
		margin-left: 2.5%;
		height: 100px;
		border-radius: 15px;
		overflow: hidden;
		margin-top: 15px;
	}

	.banner image {
		width: 100%;
		height: 100px;
	}

	.wallace {
		background-color: #FFFFFF;
		width: 95%;
		margin-left: 2.5%;
		height: 260px;
		border-radius: 15px;
		overflow: hidden;
		margin-top: 15px;
	}

	.wallace image {
		width: 100%;
		height: 80px;
	}

	.wallace_price {
		font-weight: 900;
		font-size: 20px;
		margin-bottom: 15px;
	}

	.merchant_text {
		font-size: 25px;
		font-weight: 900;
		padding-top: 25px;
		padding-left: 15px;
	}

	.merchant_tab {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.merchant_tab view {
		font-size: 14px;
		color: #707070;
	}
</style>
